import React, { useRef, useEffect } from "react";
import { Zoom,Flip } from "react-reveal";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";

const App = () => {
  useEffect(() => {
    new Reveal().initialize({
      keyboard: true,
    });
  }, []);

  return (
    <div className="reveal">
      <div>
        <div className="slides" style={{ width: "100vw", height: "100vh" }}>
          <section>
            <h1>React 入门案例</h1>
            <h3>Welcome to my lesson!</h3>
            <span>---- provide by 吴昊</span>
          </section>
          <section>
            <h2>Section 1</h2>
            <Flip left>
              <p>This is section 1.</p>
            </Flip>
          </section>
          <section>
            <h2>Section 2</h2>
            <p>This is section 2.</p>
          </section>
        </div>
      </div>
    </div>
  );
};

export default App;
